<template>
  <el-container class="container-height">
    <el-aside class="f-aside" :style="{ backgroundColor: menuConfig.backgroundColor }">
      <el-scrollbar class="container-height">
        <f-menu v-bind:menuConfig="menuConfig" v-bind:collapse="collapse" v-bind:menuList="menuList" />
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="f-header header-height">
        <div class="f-header-top">
          <div class="f-header-top-left">
            <f-icon style="cursor: pointer" icon="Operation" size="28" color="#999999" type="element" @click="toggleCollapse" />
            <f-breadcrumb />
          </div>
          <div class="f-header-top-right">
            <div class="header-info">作者：UnknownPlayer</div>
            <f-icon @click="toggle" style="cursor: pointer; margin-right: 8px" icon="FullScreen" size="24" color="#666666" type="element" />
            <f-icon @click="openMessage" style="cursor: pointer; margin-right: 8px" icon="Bell" size="24" color="#666666" type="element" />
            <el-avatar class="f-avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="40" />
            <div>
              <el-dropdown @command="handleCommand">
                <div class="el-dropdown-link">
                  <div style="font-size: var(--var-text-14)">{{ user.name }}</div>
                  <div style="font-size: var(--var-text-12)">{{ user.role.name }}</div>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>切换角色</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="f-header-bottom">
          <f-tag-menu />
        </div>
      </el-header>
      <el-main class="f-main main-height">
        <div class="content-style">
          <RouterView v-slot="{ Component }">
            <template v-if="Component">
              <Transition name="el-zoom-in-center">
                <KeepAlive :include="[]" max="5">
                  <component class="view-style" :key="pageKey" :is="Component" />
                </KeepAlive>
              </Transition>
            </template>
          </RouterView>
        </div>
      </el-main>
      <el-drawer v-model="drawer" title="消息通知">
        <span>通知内容</span>
      </el-drawer>
    </el-container>
  </el-container>
</template>

<script setup>
// 外部引入
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useFullscreen } from '@vueuse/core'

const { toggle } = useFullscreen()
const router = useRoute()
const pageKey = ref(router.fullPath)
const user = ref(window.$user)
// 静态配置项 可以手动修改
const menuConfig = { backgroundColor: '#545C64', activeTextColor: '#FFD04B', textColor: '#FFFFFF' }

// 菜单展开收起功能
let collapse = ref(false)
const toggleCollapse = () => (collapse.value = !collapse.value)
const menuList = window.$utils.array2tree(window.$menus.filter((item) => !item.hidden))
let drawer = ref(false)
const openMessage = () => (drawer.value = !drawer.value)

const handleCommand = (command) => {
  if (command === 'logout') {
    localStorage.removeItem(import.meta.env.VITE_APP_TOKEN_NAME)
    location.reload()
  }
}
</script>

<style scoped>
.f-aside {
  width: unset;
}

.f-header {
  padding: unset;
}

.f-main {
  width: 100%;
  padding: 12px;
  background-color: #f0f2f5;
  position: relative;
}

.f-header-top {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #ececec;
  box-sizing: border-box;
}

.f-header-top-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.f-header-top-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  width: 450px;
}

.f-header-bottom {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
}

.f-avatar {
  margin: 0 8px;
}
</style>
